import React, { useState, useEffect } from 'react'
import { useSearchParams, useNavigate } from "react-router";
import { useQuery, useMutation } from '@tanstack/react-query'
import { apiGetInfo32, apiGetInfo } from '@/utils/apis.js'
import Skeleton from '@/comp/Skeleton'
import bazitiyao from '@/assets/bazitiyao.png'
import useStore from '@/store/bazi.js'
import duck from '@/assets/duck.jpg'
function tianganColor(key) {
  switch (key) {
    case '甲':
      return '#07e930'
    case '乙':
      return '#07e930'
    case '丙':
      return '#d00d17'
    case '丁':
      return '#d00d17'
    case '戊':
      return '#8b6d03'
    case '己':
      return '#8b6d03'
    case '庚':
      return '#ef9104'
    case '辛':
      return '#ef9104'
    case '壬':
      return '#2e83f6'
    case '癸':
      return '#2e83f6'
    case '子':
      return '#2e83f6'
    case '丑':
      return '#8b6d03'
    case '寅':
      return '#07e930'
    case '卯':
      return '#07e930'
    case '辰':
      return '#8b6d03'
    case '巳':
      return '#d30505'
    case '午':
      return '#d30505'
    case '未':
      return '#8b6d03'
    case '申':
      return '#ef9104'
    case '酉':
      return '#ef9104'
    case '戌':
      return '#8b6d03'
    case '亥':
      return '#2e83f6'
  }
}
export default function My() {
  var bzObj, Tiyao, Notice
  var navi = useNavigate()
  var [enable, setEnable] = useState(false)
  var [searchParams, setSearchParams] = useSearchParams()
  var { data, error, isFetching, isPending } = useQuery({
    queryKey: ['getInfoById'],
    queryFn: apiGetInfo,
    retry: 4,
    retryDelay: 3000,
    meta: searchParams.get('id'),
    enabled: enable
  })
  var allObj = useStore((state) => state.baziObj)
  var updateBaZi = useStore((state) => state.updateBaZi)

  useEffect(() => {
    if (searchParams.get('id')) {
      setEnable(true)
    }
  }, [])
  useEffect(() => {
    if (!data) { return }
    updateBaZi(data)
  }, [data])
  bzObj = allObj.data
  Tiyao = allObj.tiyao
  Notice = allObj.notice
  console.log('======isFetching', isFetching);
  console.log('======isPending', isPending);
  if (allObj.errcode == -1) {
    return <div>api次数用尽</div>
  }
  if (error) {
    return <div>错误代号:{error.status}</div>
  }
  if (searchParams.get('id') && isFetching && isPending) {
    return <Skeleton></Skeleton>
  }
  if (Object.keys(allObj).length === 0) {
    return null
  }

  return (
    <div>
      <div className='h-[5px]'></div>
      <div className="p-[10px_10px_5px_10px] mb-[5px]flex justify-between">
        <div><span className='text-[#999]'>公历:</span>{bzObj.base_info.gongli}</div>
        {/* <div>时区:东八</div> */}
      </div>
      <div className="text-[12px] rounded border-[#e5dccf] border-1 border-solid bg-[#fefcfb] w-[96%] mx-auto">
        <div className="topbox p-[30px_5px_10px_5px] flex justify-between items-center text-center">
          <div className='invisible flex-1'>占位</div>
          <div className='flex-1'>年柱</div>
          <div className='flex-1'>月柱</div>
          <div className='flex-1'>日柱</div>
          <div className='flex-1'>时柱</div>
        </div>
        <div className=" p-[5px] flex justify-between items-center text-center">
          <div className='flex-1'>主星</div>
          <div className='flex-1'>{bzObj.bazi_info.tg_cg_god[0]}</div>
          <div className='flex-1'>{bzObj.bazi_info.tg_cg_god[1]}</div>
          <div className='flex-1'>{bzObj.bazi_info.tg_cg_god[2]}</div>
          <div className='flex-1'>{bzObj.bazi_info.tg_cg_god[3]}</div>
        </div>
        <div className=" p-[5px] flex justify-between bg-[#f5f4f0] items-center text-center">
          <div className='flex-1'>天干</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[0][0]) }}>{bzObj.bazi_info.bazi[0][0]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[1][0]) }}>{bzObj.bazi_info.bazi[1][0]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[2][0]) }}>{bzObj.bazi_info.bazi[2][0]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[3][0]) }}>{bzObj.bazi_info.bazi[3][0]}</div>
        </div>
        <div className=" p-[5px] flex justify-between bg-[#f5f4f0] items-center text-center">
          <div className='flex-1'>地支</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[0][1]) }}>{bzObj.bazi_info.bazi[0][1]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[1][1]) }}>{bzObj.bazi_info.bazi[1][1]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[2][1]) }}>{bzObj.bazi_info.bazi[2][1]}</div>
          <div className='flex-1 text-[18px]' style={{ color: tianganColor(bzObj.bazi_info.bazi[3][1]) }}>{bzObj.bazi_info.bazi[3][1]}</div>
        </div>
        <div className="p-[5px] flex justify-between items-center text-center">
          <div className='flex-1'>藏干</div>
          {bzObj.bazi_info.dz_cg.map((v, k) => {
            var __detail = v.split('|')
            var arr__detail = __detail.map((vv, kk) => {
              return (<div key={kk}>{vv}</div>)
            })
            return <div className='flex-1' key={k}>{arr__detail}</div>
          })}


        </div>
        <div className="p-[5px] flex justify-between items-center text-center bg-[#f5f4f0]">
          <div className='flex-1'>副星</div>
          <div className='flex-1'>
            {bzObj.detail_info.fuxing.year.map((v, k) => {
              return <div key={k}>{v}</div>
            })}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.fuxing.month.map((v, k) => {
              return <div key={k}>{v}</div>
            })}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.fuxing.hour.map((v, k) => {
              return <div key={k}>{v}</div>
            })}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.fuxing.day.map((v, k) => {
              return <div key={k}>{v}</div>
            })}
          </div>
        </div>
        <div className="p-[5px] flex justify-between items-center text-center">
          <div className='flex-1'>星运</div>
          <div className='flex-1'>
            {bzObj.detail_info.xingyun.year}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.xingyun.month}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.xingyun.hour}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.xingyun.day}
          </div>
        </div>
        <div className="p-[5px] flex justify-between items-center text-center bg-[#f5f4f0]">
          <div className='flex-1'>空亡</div>
          <div className='flex-1'>
            {bzObj.detail_info.kongwang.year}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.kongwang.month}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.kongwang.hour}
          </div>
          <div className='flex-1'>
            {bzObj.detail_info.kongwang.day}
          </div>
        </div>
        <div className="p-[5px] flex justify-between items-center text-center">
          <div className='flex-1'>纳音</div>
          <div className='flex-1'>{bzObj.detail_info.nayin.year}</div>
          <div className='flex-1'>{bzObj.detail_info.nayin.month}</div>
          <div className='flex-1'>{bzObj.detail_info.nayin.hour}</div>
          <div className='flex-1'>{bzObj.detail_info.nayin.day}</div>
        </div>
        <div className="bottombox p-[10px_5px_30px_5px] flex justify-between items-center text-center bg-[#f5f4f0]">
          <div className='flex-1'>神煞</div>
          <div className='flex-1 text-[#b2955d]'>
            {bzObj.detail_info.shensha.year.split(' ').map((v, k) => {
              return (<div key={k}>{v}</div>)
            })}
          </div>

          <div className='flex-1 text-[#b2955d]'>
            {bzObj.detail_info.shensha.month.split(' ').map((v, k) => {
              return (<div key={k}>{v}</div>)
            })}
          </div>

          <div className='flex-1 text-[#b2955d]'>
            {bzObj.detail_info.shensha.hour.split(' ').map((v, k) => {
              return (<div key={k}>{v}</div>)
            })}
          </div>

          <div className='flex-1 text-[#b2955d]'>
            {bzObj.detail_info.shensha.day.split(' ').map((v, k) => {
              return (<div key={k}>{v}</div>)
            })}
          </div>
        </div>
      </div>
      <img src={bazitiyao} className="block w-[50%] mx-auto my-[20px]" />
      <div style={{ backgroundImage: `url(${duck})`, backgroundSize: '100% 100%' }}>
        <div className="relative w-[96%] mx-auto min-h-[150px]  text-[14px] rounded border-[#e5dccf] border-1 border-solid bg-[#fefcfb]/50 p-[20px_10px]">
          <div className="topbox2 h-[40px]"></div>
          {Tiyao ? Tiyao : '暂无提要'}
          <div className="bottombox2 h-[35px]"></div>
        </div>
        <div className='w-[96%] mx-auto py-[10px] text-center text-[#999] text-[10px]'>{Notice}</div>
      </div>
    </div>
  )
}
